const path = require('path')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const HOST = 'localhost'
const PORT = 8080
const HTTPS = false
console.log('path dist', path.resolve(__dirname, 'dist'))
module.exports = {
    mode: 'development',

    entry: './src/index.ts',
    output: {
        publicPath: '/',
        filename: 'js/main.js',
        path: path.resolve(__dirname, 'dist'),
        hotUpdateChunkFilename: 'hot/hot-update.js',
        hotUpdateMainFilename: 'hot/hot-update.json'
    },

    module: {
        rules: [{
            test: /\.ts$/,
            use: "ts-loader"
        }]
    },
    resolve: {
        extensions: [
            '.ts', '.js', '.sass', '.css'
        ]
    },

    //https://segmentfault.com/a/1190000020056905
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new HtmlWebpackPlugin({
            filename: './404.html',//编译后的文件名
            template: './public/404.html'
        }),
        new webpack.HotModuleReplacementPlugin(),
        // 启动输出清理
        new FriendlyErrorsWebpackPlugin({
            compilationSuccessInfo: {
                messages: [`You application is running here ${HTTPS ? 'https' : 'http'}://${HOST}:${PORT}`],
                // notes: ['Some additional notes to be displayed upon successful compilation'],
                clearConsole: true
            },
        })
    ],

    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        quiet: true,
        compress: true,
        port: PORT,
        host: HOST,
        https: HTTPS,
        hot: true,
        watchContentBase: true,
        open: true,
        overlay: true,
        openPage: './index.html',
        historyApiFallback:{
            rewrites:[
                {from:/./, to:'/404.html'}
            ]
        }
    }
};